import React, { useState, useEffect, useRef, useLayoutEffect } from 'react';
import echarts from 'echarts';
import Graph from './components/Graph';

const stationList = [
  '孵化园',
  '海昌路',
  '西博城',
  '红石公园',
  '兴隆胡',
  '科学城',
];
const CustomChart = () => {
  const myChart = useRef();
  useEffect(() => {
    myChart.current = echarts.init(document.getElementById('chart'));
    setOption();
  }, []);

  function renderData({ start, end, A }) {
    let data = [];

    function func(x) {
      const diff = end - start;
      return A * Math.sin((Math.PI / diff) * (x - start));
    }

    for (let i = start; i <= end; i += 0.1) {
      i = Math.round(i * 10) / 10;
      data.push({
        value: [i, func(i)],
      });
    }

    console.log(data.length);
    const middle = parseInt(data.length / 2);
    data[middle] = {
      ...data[middle],
      symbol: 'arrow',
      symbolSize: 8,
      symbolRotate: -90,
      itemStyle: {
        color: '#1e4b70',
        borderColor: '#1e4b70',
      },
    };

    return data;
  }

  function setOption() {
    const options = {
      // animation: false,
      tooltip: {
        show: true,
        trigger: 'item',
        // formatter: function(params) {
        // 	console.log(params);
        // }
      },

      xAxis: {
        min: 0,
        max: stationList.length - 1,
        minInterval: 1,
        maxInterval: 1,
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          interval: 1,
          rotate: 40,
          formatter: function (value, index) {
            return stationList[index];
          },
        },
      },
      yAxis: {
        type: 'value',
        name: '人次',
        axisLine: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
          },
        },
      },
      series: [
        {
          type: 'line',
          data: renderData({ start: 0, end: 5, A: 50 }),
          smooth: true,
          symbol: 'none',
        },
        {
          type: 'line',
          data: renderData({ start: 2, end: 4, A: 25 }),
          smooth: true,
          symbol: 'none',
        },
        {
          type: 'line',
          data: renderData({ start: 0, end: 4, A: 30 }),
          smooth: true,
          symbol: 'none',
        },
      ],
      // 线条颜色
      lineStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#1f486d', // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#17ddee', // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
    };
    myChart.current.setOption(options);
  }

  return (
    <div style={{ margin: '0 auto' }}>
      <h2>自定义图表</h2>
      <div
        id="chart"
        style={{ height: '500px', width: '800px', margin: '0 auto' }}
      />
      <Graph />
    </div>
  );
};
export default CustomChart;
